import React, { useEffect, useState } from 'react';
import { ResponsiveGrid } from '@alifd/next';
import Statistics from './components/Statistics';
import AssetColumnChart from './components/AssetColumnChart';
import PlanRecord from './components/PlanRecord';
import { apiAccount } from '@/services';
import { observer } from 'mobx-react-lite';

const { Cell } = ResponsiveGrid;

const Dashboard = () => {
  const [isAdmin, setIsAdmin] = useState(false);
  useEffect(() => {
    (async () => {
      const role = await apiAccount.getRolesBelong(global.me?.username);
      if (JSON.stringify(role) !== '[]') {
        const current = role.some((p) => p.roleName === '管理员');
        setIsAdmin(current);
      }
    })();
  }, []);
  return (
    <ResponsiveGrid gap={20} style={{ height: '100%' }}>
      <Cell colSpan={12} style={{ height: '100%' }}>
        <Statistics />
        <AssetColumnChart />
        {(global.isAdmin || isAdmin) && <PlanRecord />}
      </Cell>
    </ResponsiveGrid>
  );
};

export default observer(Dashboard);
